<template>
	<!-- 	<view>
		<view v-for="(equ,index) in device" :key="index" @click="zishebei(equ)">
			<view class="list" :class="{active:equ.isOnline==false}">
				<view class="image">
					<image :src="equ.iconUrl"></image>
				</view>
				<view class="text" v-if="equ.isOnline==true">{{equ.name}}</view>

				<view class="lixian_l" v-if="equ.isOnline==false">
					<view>{{equ.name}}</view>
					<view class="lixian">离线</view>
				</view>

				<view class="tiem" style="background-color: #ffeded;"
					v-if="equ.zigBeeWifi==false&&equ.times!=null&&equ.isOnline==true">
					<image src="../../../static/image/mengling.png"></image>
					<view>{{equ.times}}</view>
				</view>
			</view>
		</view>
	</view> -->


	<view>
		
		<view class="whole" v-if="isShow">
			<image class="image" src="/static/image/zanwushuju@2x.png" mode="aspectFit"></image>
			<text>暂无数据</text>
		</view>
		
		<!-- 列表 -->
		<view v-for="(equ,index) in device" :key="index" @click="zishebei(equ)">
			<view v-if="device.length>1" class="list">
				<view class="image">
					<view>
						<image :src="equ.iconUrl"></image>
					</view>
					<view class="text">{{equ.name}}</view>
				</view>

				<!-- 水浸 -->
				<view class="right" v-if="equ.zigBeeWifi==false&&equ.productId=='u53tqzme'">
					<!-- 		<view class="texts" v-if="equ.dps[1]=='normal' "><text>正常</text></view>
					<view class="texts" v-if="equ.dps[1]=='alarm' "><text>警告</text></view> -->
					<view v-if="equ.dps[1]=='normal' ">水浸检查状态:<text>正常</text></view>
					<view v-if="equ.dps[1]=='alarm' "><text>水浸检查状态:警告</text></view>
					<view>电池电量百分比:<text>{{equ.dps[4]}}</text></view>
					<!-- <view><text>电池电量百分比</text></view> -->
				</view>

				<!-- 门磁 -->
				<view class="right" v-if="equ.zigBeeWifi==false&&equ.productId=='bfrz3oq5'">
					<view v-if="equ.dps[101]==true ">门磁状态:<text>开</text></view>
					<view v-if="equ.dps[101]==false ">门磁状态:<text>关</text></view>
					<!-- <view><text>门磁状态</text></view> -->
					<view>电磁电量百分比:<text>{{equ.dps[103]}}</text></view>
					<!-- <view><text>电磁电量百分比</text></view> -->
				</view>

				<!-- 门磁 -->
				<view class="right" v-if="equ.zigBeeWifi==false&&equ.productId=='f1hmoyj4'">
					<view v-if="equ.dps[1]==true ">门磁状态:<text>开</text></view>
					<view v-if="equ.dps[1]==false ">门磁状态:<text>关</text></view>
					<!-- <view><text>门磁状态</text></view> -->
					<view>电磁电量百分比:<text>{{equ.dps[2]}}</text></view>
					<!-- <view><text>电磁电量百分比</text></view> -->
				</view>


				<!-- 空调伴侣 -->
				<view class="right" v-if="equ.zigBeeWifi==false&&equ.productId=='n8afsq8gh3zwoupn'">
					<!-- 	<view class="texts"><text>{{equ.dps[102]}}</text></view>
					<view><text>模式</text></view> -->
					<view v-if="equ.dps[101]==true ">电源:<text>开</text></view>
					<view v-if="equ.dps[101]==false ">电源:<text>关闭</text></view>
					<!-- <view><text>电源</text></view> -->
				</view>

				<!-- 空调伴侣 -->
				<view class="right" v-if="equ.zigBeeWifi==false&&equ.productId=='uch4vwjnyvjkph8u'">
					<!-- 	<view class="texts"><text>{{equ.dps[102]}}</text></view>
					<view><text>模式</text></view> -->
					<view v-if="equ.dps[13]==true ">电源:<text>开</text></view>
					<view v-if="equ.dps[13]==false ">电源:<text>关闭</text></view>
					<!-- <view><text>电源</text></view> -->
				</view>


				<!-- 空调 -->
				<view class="right" v-if="equ.zigBeeWifi==false&&equ.productId=='jllh2kdbGM0QTdf1'">
					<view v-if="equ.dps[102]==0">模式:<text>制冷</text></view>
					<view v-if="equ.dps[102]==1">模式:<text>制热</text></view>
					<view v-if="equ.dps[102]==2">模式:<text>自动</text></view>
					<view v-if="equ.dps[102]==3">模式:<text>送风</text></view>
					<view v-if="equ.dps[102]==4">模式:<text>除湿</text></view>
					<!-- <view><text>模式</text></view> -->
					<view v-if="equ.dps[101]==true ">开关:<text>开</text></view>
					<view v-if="equ.dps[101]==false ">开关:<text>关闭</text></view>
					<!-- <view><text>开关</text></view> -->
				</view>

				<!-- 温湿度 -->
				<view class="rights" v-if="equ.zigBeeWifi==false&&equ.productId=='nau60otv'||equ.productId=='kchagk8y'">
					<view>当前温度值:<text>{{equ.valueText}}</text></view>
					<!-- <view><text>当前温度值</text></view> -->
					<view>当前湿度值:<text>{{equ.valueTexts}}</text></view>
					<!-- <view><text>当前湿度值</text></view> -->
					<view>电池电量百分比:<text>{{equ.dps[4]}}</text></view>
					<!-- <view><text>电池电量百分比</text></view> -->
				</view>

				<!-- 烟雾 -->
				<view class="rights" v-if="equ.zigBeeWifi==false&&equ.productId=='qy1z1a8z'">
					<view v-if="equ.dps[1]=='normal' ">烟雾检测状态:<text>正常</text></view>
					<view v-if="equ.dps[1]=='alarm' ">烟雾检测状态:<text>警告</text></view>
					<!-- <view><text>烟雾检测状态</text></view> -->
					<view v-if="equ.dps[9]=='check_success' ">设备自检结果:<text>正常</text></view>
					<view v-if="equ.dps[9]!='check_success' ">设备自检结果:<text>损坏</text></view>
					<!-- <view><text>设备自检结果</text></view> -->
					<view v-if="equ.dps[14]=='high' ">电池电量状态:<text>高</text></view>
					<view v-if="equ.dps[14]!='high' ">电池电量状态:<text>底</text></view>
					<!-- <view><text>电池电量状态</text></view> -->
				</view>

				<view v-if="equ.zigBeeWifi==false" class="lixian_l">
					<view v-if="equ.isOnline==true" class="dian">
						<view></view>在线
					</view>
					<view v-if="equ.isOnline==false" class="dians">
						<view></view>离线
					</view>
				</view>
			</view>
		</view>

	</view>


</template>

<script>
	export default {
		data() {
			return {
				uniqueNo: "",
				family: [],
				homeId: "",
				device: [{
					valueText: "",
					valueTexts: "",
				}],
				family: [],
				home: "",
				isShow:false
				
			}
		},
		onShow: function() { //option为object类型，会序列化上个页面传递的参数
			this.fangwu();
		},
		onLoad() {
			// this.getName();
			this.getSheBei(this.family);
		},
		methods: {
			fangwu() {
				const uniqueCode = uni.getStorageSync('uniqueCode');
				this.uniqueNo = uniqueCode
				uni.setNavigationBarTitle({
					title: this.uniqueNo + "设备列表"
				});
				this.getName();
			},


			// title() {
			// 	uni.setNavigationBarTitle({
			// 		title: this.uniqueNo + "设备列表"
			// 	});
			// },
			async getName() {
				console.log(this.uniqueNo)
				try {
					const res = await this
						.$requestTuYa({
							url: '/api-iot/home/' + this.uniqueNo + '/info',
							method: 'get'
						});
					uni.hideLoading(); //加载结束
						console.log(res)
					if (res.success == true) {
					
						console.log("sdfsf")
						this.family = res.body.command;
						console.log(this.family)
						this.homeId = this.family.homeId
						this.getSheBei(this.family);
					} else { //加载失败
						uni.showToast({
							title: '家庭信息加载失败',
							duration: 2000
						});
					}
				} catch (e) { //如果涂鸦智能无法连接
					uni.hideLoading(); //加载结束
					uni.showToast({
						title: '家庭信息加载失败,请稍后再试',
						duration: 2000,
						icon: none
					});
				}
			},


			getSheBei(family) {
				try {
					uni.showLoading({
						title: '正在加载设备列表'
					});
					const homeModule = uni.requireNativePlugin("LJY-HomeModule"); //调用android中自定义的插件名称
					const ret = homeModule.homeDetail({ //login表示自定义插件的函数名，第一个表示要传递的参数
						homeId: family.homeId
					});
					// console.log(ret)
					uni.hideLoading(); //加载结束
					if (ret.code == 0) { //加载成功
						this.device = ret.data.deviceList;
						for (var i = 0; i < this.device.length; i++) {
							if (this.device[i].productId == 'nau60otv' || this.device[i].productId == 'kchagk8y') {
								this.device[i].valueText = this.device[i].dps[1] / 10
								this.device[i].valueTexts = this.device[i].dps[2] / 10
							}
						}
						console.log(this.device.length)
					} else { //加载失败
						uni.showToast({
							title: ret.msg,
							duration: 2000
						});
					}
				} catch (e) { //如果涂鸦智能无法连接
					uni.hideLoading(); //加载结束
					uni.showToast({
						title: '设备列表加载失败,请稍后再试',
					});
				}
				console.log("this.device.length",this.device.length)
				if(this.device.length<=1){
					this.isShow=true;
				}
			},

			onNavigationBarButtonTap(e) {
				uni.showLoading({
					title: '正在跳转涂鸦智能UI'
				});
				let message = "";
				try {
					// console.log(this.homeId);
					const deviceConfigModule = uni.requireNativePlugin(
						"LJY-DeviceConfigModule")
					const ret = deviceConfigModule
						.startDeviceActiveAction({
							'homeId': this.homeId
						});
					uni.hideLoading(); //加载结束
					message = ret.msg;
				} catch (e) { //如果涂鸦智能无法连接
					uni.hideLoading(); //加载结束
					message = "涂鸦智能家居功能失效"
				}
				uni.showToast({
					title: message,
					mask: true,
					duration: 2000
				});

			},
			zishebei(equ) {
				// console.log(equ.devId)
				uni.showLoading({
					title: '正在跳转到涂鸦官方设备控制界面'
				});
				try {
					const module = uni.requireNativePlugin("LJY-DeviceManageModule") //调用android中自定义的插件名称
					//跳转到涂鸦设备详情
					module.goPanelWithCheckAndTip({ //login表示自定义插件的函数名，第一个表示要传递的参数
						deviceId: equ.devId,
						homeId: this.homeId
					});
					uni.hideLoading(); //加载结束
				} catch (e) { //如果涂鸦智能无法连接
					uni.hideLoading(); //加载结束
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	//列表
	.list {
		border-radius: 30rpx;
		border-bottom: 3rpx solid #ebebeb;
		background-color: #FFFFFF;
		height: 300rpx;
		display: flex;
		width: 95%;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.list .image {
		width: 40%;
		text-align: center;
		margin-top: 20rpx;

		image {
			margin-top: 30rpx;
			align-items: center;
			height: 120rpx;
			width: 120rpx;
		}
	}

	.list .text {
		margin-top: 20rpx;
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bold;
	}

	.right {
		width: 45%;
		margin-top: 30rpx;

		text {
			font-size: 30rpx;
			// font-weight: bold;
			// color: #000000;
		}

		view {
			margin-top: 30rpx;
			font-size: 30rpx;
		}


	}

	.right :nth-child(2) {
		margin-top: 90rpx;
	}

	.rights {
		width: 45%;
		margin-top: 30rpx;

		text {
			font-size: 30rpx;
			// font-weight: bold;
			// color: #000000;
		}

		view {
			margin-top: 30rpx;
			font-size: 30rpx;
		}
	}

	.list .tiem {
		display: flex;
		margin-top: 30rpx;
		margin-right: 30rpx;
		line-height: 90rpx;
		margin-left: auto;
		height: 90rpx;
		width: 200rpx;

		view {
			margin-left: auto;
			margin-right: 30rpx;
			color: #f0673d;
			width: 100rpx;
			font-size: 31rpx;
			line-height: 40rpx;
			white-space: normal;
			word-break: break-all;
			word-wrap: break-word;
		}
	}

	.dian {
		color: #b8e986;
		display: flex;
		margin-top: 15rpx;

		view {
			width: 14rpx;
			height: 14rpx;
			border: 1px solid #b8e986;
			border-radius: 10rpx;
			background: #b8e986;
			margin: 10rpx 10rpx 0rpx 0rpx;
		}
	}

	.dians {
		color: #9b9b9b;
		display: flex;
		// margin-right: 10rpx;
		margin-top: 15rpx;

		view {
			width: 14rpx;
			height: 14rpx;
			border: 1px solid #9b9b9b;
			border-radius: 10rpx;
			background: #9b9b9b;
			margin: 10rpx 10rpx 0rpx 0rpx;
		}
	}
	
	.bottom {
		height: 210rpx;
		color: #959595;
		line-height: 210rpx;
		text-align: center;
		font-size: 16px;
	}
	
	.whole {
		text-align: center;
		font-size: 60rpx;
		color: #959595;
	
		.image {
			margin: 320rpx 0 50rpx 0;
			width: 100%;
			height: 350rpx;
		}
	}
	
</style>
